<template lang="html">
  <div :id="id" v-html="inputContent" @input="outputContent"></div>
</template>
<script>
//  import WangEditor from '../../static/wangEditor/js/wangEditor.js'
  import WangEditor from 'wangeditor'
  export default {
    props: {
      inputContent: {
        type: String,
        default: ''
      },
      uploadUrl: {
        type: String,
        default: ''
      },
      menus: {
        type: Object,
        default:
         [
//         'source',
//         '|',
         'bold',
         'underline',
         'italic',
         'strikethrough',
         'eraser',
         'forecolor',
         'bgcolor',
         '|',
         'quote',
         'fontfamily',
         'fontsize',
         'head',
         'lineheight',
         'indent',
         'unorderlist',
         'orderlist',
         'alignleft',
         'aligncenter',
         'alignright',
         '|',
         'link',
         'unlink',
         'table',
         'emotion',
         '|',
         'img',
         'video',
         'location',
         'insertcode',
//         '|',
//          'symbol',//特殊字符
//          'mathquill',//公式
         '|',
         'undo',
         'redo',
         'fullscreen'
         ]
      }
    },
    data() {
      return {
        content: '',
        id: 'wangEditor_' + Math.random(1)//动态设置id
      }
    },
    computed: {},
    created(){
    },
    mounted() {
      // 阻止输出log
      wangEditor.config.printLog = false;
      this.createEditor();
    },
    methods: {
      createEditor() {
        const self = this;
        //获取当然editor的dom
        const editor_ = new WangEditor(document.getElementById(this.id));

        //配置菜单
        if (this.menus && this.menus.length > 0)
          editor_.config.menus = this.menus;
        // 跨域上传
        editor_.config.uploadImgUrl = this.uploadUrl;
        // 可以自定义配置 xhr.withCredentials （默认为 true）
        editor_.config.withCredentials = false;
        // 配置自定义表情，在 create() 之前配置
        editor_.config.emotions = {
          // 第一组，id叫做 'default'
//              'default': {
//                title: '默认',  // 组名称
//                data: '/static/emotions/default.data'  // 服务器的一个json文件url，例如官网这里配置的是 http://www.wangeditor.com/wangEditor/test/emotions.data
//              },
          'sina': {
            title: '默认',  // 组名称
            data: '/static/emotions/sina.data'
          }
        };
        editor_.config.emotionsShow = "value";//以文字填入内容
        editor_.onchange = function () {
          self.formatContent(this.$txt.html())
        }
        editor_.create()
      },
      formatContent(content) {
        // handle
        // ...
        this.content = content
        this.outputContent()
      },
      outputContent() {
        this.$emit('input', this.content);
      }
    },
    components: {}
  }
</script>

<style lang="css" scoped>
</style>
